{% stylesheet %}
.block_newsletter {
  background-color: var(--bg-color);
  padding: var(--general_layout_spacing) 0 0 0;
}

@media screen and (max-width: 767px) {
  .block_newsletter {
    padding: 10px 0 0 0;
  }
}

.block_newsletter.noImage {
  padding: var(--general_layout_spacing) 0;
}

@media screen and (min-width: 768px) {
  .block_newsletter .newsletter__item {
    margin: 0 120px;
    display: flex;
    gap: 40px;
  }
}

.block_newsletter .newsletter__item .newsletter__inner {
  flex: 0 0 35%;
}

.block_newsletter .newsletter__item .newsletter__inner h2 {
  color: var(--title-color);
  margin: 0;
  text-align: left !important;
}

@media screen and (max-width: 767px) {
  .block_newsletter .newsletter__item .newsletter__inner h2 {
    margin: 20px 0;
  }
}

.block_newsletter .newsletter__item .newsletter__inner_box {
  flex: 0 0 60%;
}

.block_newsletter .newsletter__item .newsletter__inner_box .newsletter {
  display: flex;
  padding: 8px;
  background-color: #fff;
}

.block_newsletter .newsletter__item .newsletter__inner_box .newsletter input {
  border-radius: var(--button_border_radius);
  height: 40px;
  flex: 1;
}

.block_newsletter .newsletter__item .newsletter__inner_box .newsletter button {
  padding: 0 26px;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: 8px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--submit-bg);
  color: var(--submit-color);
}

.block_newsletter .newsletter__item .newsletter__inner_box .newsletter button:hover {
  background-color: #000;
}

.block_newsletter .newsletter__item .newsletter__inner_box .newsletter__subheading {
  margin-top: 12px;
  color: var(--detail-color);
}

.block_newsletter .newsletter__image {
  height: 200px;
  padding: 0 var(--general_layout_spacing);
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .block_newsletter .newsletter__image {
    padding: 0;
    height: 100px;
    margin-top: 20px;
  }
}

.block_newsletter .newsletter__image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

{% endstylesheet %}

{% assign data = section.settings %}
<div class="block_newsletter {% if data.image.src == '' %}noImage{% endif %}" style="--bg-color: {{data.bg_color}};--title-color: {{data.title_color}};--detail-color: {{data.detail_color}};">
    <div class="container_wrapper">
        <div class="newsletter__item">
            <div class="newsletter__inner">
                <h2 class="title">{{data.title}}</h2>
            </div>
            <div class="newsletter__inner_box">
                <div class="newsletter">
                    <input type="text" placeholder="{{ lang.general.email }}" id="block_email_input_{{block_id}}" />
                    <button id="newsletter_btn{{block_id}}" style="--submit-bg: {{data.submit_bg}};--submit-color: {{data.submit_color}}">
                        <span>{{ section.settings.buttonName | default: 'Subscribe' }}</span>
                    </button>
                </div>
                <div class="newsletter__subheading">
                    <p>{{data.detail}}</p>
                </div>
            </div>
        </div>
       
    </div>
    {%- if data.image.src != '' -%}
    <div class="newsletter__image">
        <img data-sizes="auto" src="{{ data.image.src }}" alt="{{data.image.alt}}">
    </div>
    {%- endif -%}
</div>
<script type="text/javascript">
(function(){const blockSubmitNewsletter = moi.throttle(function () {
    var domEmail = "#block_email_input_{{block_id}}";
    email = $("#block_email_input_{{block_id}}").val();
    if (email == "") {
      moi.tooltip({
        placement: "top",
        el: domEmail,
        timer: 5000,
        space: 0,
        content: "{{ lang.general.please_enter_a_valid_email_address }}",
      });
      return;
    }
    $isvalidemail =
      /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(
        email
      );
    if (!$isvalidemail) {
      moi.tooltip({
        placement: "top",
        el: domEmail,
        timer: 1000,
        space: 0,
        content: "{{ lang.general.please_enter_a_valid_email_address }}",
      });
      return;
    }
    const load = moi.nodeShowLoading(
      "#newsletter_btn{{block_id}}",
      "{{ section.settings.buttonColor }}"
    );
    moi.ajax({
      url: "/module/newsletter",
      type: "POST",
      data: JSON.stringify({
        email: email,
      }),
      dataType: "json",
      cache: false,
      complete: function () {
        load.close();
      },
      success: function (res) {
        if (res.data && res.data.data) {
          if (res.data.new_customer) {
            callback_generate_lead();
          }
          moi.message({
            content: `{{ section.settings.newsletterTip }}`,
          });
        } else {
          moi.tooltip({
            placement: "top",
            el: domEmail,
            timer: 1000,
            space: 0,
            content: "{{ lang.general.subscribe_failed }}",
          });
        }
      },
      error: function () {
        moi.tooltip({
          placement: "top",
          el: domEmail,
          timer: 1000,
          space: 0,
          content: "{{ lang.general.connection_fails_please_retry_refresh }}",
        });
      },
    });
  }, 3000);
  $("#newsletter_btn{{block_id}}").click(function () {
    blockSubmitNewsletter();
  });
  })()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_newsletter",
	"icon": "icon-dingyue",
	"is_global": false,
	"name": {
		"zh_CN": "邮件订阅",
		"en_US": "Mail subscription"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": ""
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "订阅按钮文字",
				"en_US": "Subscribe button text"
			},
			"id": "buttonName",
			"default": ""
		},
		{
			"type": "card_textarea",
			"id": "newsletterTip",
			"label": {
				"zh_CN": "订阅成功文字",
				"en_US": "Subscribe successful text"
			},
			"placeholder": {
				"zh_CN": ""
			},
			"default": "Thank you for joining our mailing list!"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽度1000px以上，高度自适应",
				"en_US": "Recommended width more than 1000px, height adaptive"
			},
			"id": "image"
		},
		{
			"type": "card_color",
			"id": "bg_color",
			"label": {
				"zh_CN": "背景颜色",
				"en_US": "Background color"
			},
			"default": "#f4f4f4"
		},
		{
			"type": "card_color",
			"id": "submit_bg",
			"label": {
				"zh_CN": "订阅按钮背景颜色",
				"en_US": "Subscribe button background color"
			},
			"default": "#cbb8c1"
		},
		{
			"type": "card_color",
			"id": "submit_color",
			"label": {
				"zh_CN": "订阅按钮文字颜色",
				"en_US": "Subscribe button text color"
			},
			"default": "#fff"
		},
		{
			"type": "card_color",
			"id": "title_color",
			"label": {
				"zh_CN": "标题颜色",
				"en_US": "Header color"
			},
			"default": "#1c1a18"
		},
		{
			"type": "card_color",
			"id": "detail_color",
			"label": {
				"zh_CN": "描述颜色",
				"en_US": "Describe color"
			},
			"default": "#cbb8c1"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Subscribe to Our Newsletter",
			"detail": "By pressing the button “Subscribe”, you confirm that you have read and are agreeing to our regarding the storage of the data submitted through this form.",
			"buttonName": "Subscribe",
			"newsletterTip": "Thank you for joining our mailing list!",
			"bg_color": "#f4f4f4",
			"submit_bg": "#cbb8c1",
			"submit_color": "#fff",
			"title_color": "#1c1a18",
			"detail_color": "#cbb8c1",
			"image": {
				"src": "",
				"alt": ""
			}
		},
		"blocks": []
	}
}
{% endschema %}